@charset "utf-8";

@keyframes scroll {
    0% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    100% { transform: translateX(-4px); }
}

@keyframes blur_txt {
    0% { filter: blur(10px); opacity: 0; }
    100% { filter: blur(0); opacity: 1; }
}

@keyframes shine {
    100% { left: 125%; }
}

@keyframes spin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes bgs {
    0% { transform: scale(1.15); opacity: 0; }
    100% { transform: scale(1.00); opacity: 1; }
}

@keyframes bgs_s {
    0% { transform: scale(1.15); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1.00); opacity: 1; }
}

@keyframes bgs1 {
    0% { transform: scale(1.25); }
    100% { transform: scale(1.00); }
}

@keyframes bgs1_s {
    0% { transform: scale(1.25) translate(-50%, -50%); }
    100% { transform: scale(1.00) translate(-50%, -50%); }
}

@keyframes bgs2 {
    0% { transform: scale(1.00); }
    100% { transform: scale(1.15); }
}

@keyframes bgs3 {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1.00); opacity: 1; }
}

@keyframes bgs4 {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1.00); opacity: 1; }
}

@keyframes bgs4_b {
    0% { transform: scale(1.00); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0; }
}

@keyframes bgs5 {
    0% { transform: scale(1.15); }
    100% { transform: scale(1.00); }
}

@keyframes left30 {
    from { transform: translateX(30%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes left30_1 {
    from { transform: translateX(0); opacity: 0; }
    to { transform: translateX(30%); opacity: 1; }
}

@-webkit-keyframes txtLeft {
    from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; opacity: 0; }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes txtLeft {
    from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; opacity: 0; }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; }
}


@-webkit-keyframes vmLeft {
    from { -webkit-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); visibility: visible; opacity: 0; }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes vmLeft {
    from { -webkit-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); visibility: visible; opacity: 0; }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; }
}

@-webkit-keyframes txtUp {
    from { -webkit-transform: translate3d(0, 250%, 0); transform: translate3d(0, 250%, 0); visibility: visible; opacity: 0; }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes txtUp {
    from { -webkit-transform: translate3d(0, 250%, 0); transform: translate3d(0, 250%, 0); visibility: visible; opacity: 0; }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; }
}

@-webkit-keyframes vm_txtUp {
    from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; opacity: 0; }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes vm_txtUp {
    from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; opacity: 0; }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; }
}


/* keyframes animation */
@keyframes scroll {
    0% { transform: translateX(3px); }
    50% { transform: translateX(-3px); }
    100% { transform: translateX(3px); }
}


@keyframes vsImg {
    0% { -webkit-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); }
    100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
}

@keyframes scaleY_bar {
    0% { -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); opacity: 0; }
    100% { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity: 1; }
}

@keyframes ani_1 {
    0% { -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; }
    100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; }
}

@keyframes ani_2 {
    0% { -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); opacity: 0; }
    100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; }
}

@keyframes ani_3 {
    0% { -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); opacity: 0; }
    100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

@keyframes ani_3_1 {
    0% { -webkit-transform: translate(-50%, 50px); -ms-transform: translate(-50%, 50px); transform: translate(-50%, 50px); opacity: 0; }
    100% { -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 1; }
}

@keyframes ani_4 {
    0% { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; }
    100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

@keyframes ani_5 {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes ani_6 {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes ani_h0 {
    0% { height: 0; }
    100% { height: 0; }
}

@keyframes ani_h {
    0% { height: 0; }
    100% { height: 100%; }
}

@keyframes ani_w {
    0% { opacity: 1; width: 0; }
    100% { opacity: 0; width: 100%; }
}


@-webkit-keyframes scrollDown {
    0% { top: 60px; }
    50% { top: 72px; }
    100% { top: 60px; }
}

@keyframes scrollDown {
    0% { top: 60px; }
    50% { top: 72px; }
    100% { top: 60px; }
}

@keyframes mv_scale {
    0% { transform: scale(0.75); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes scale {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes ani_icon5 {
    0% { border-radius: 50%; transform: rotateZ(0); }
    50% { border-radius: 0; transform: rotateZ(180deg); }
    100% { border-radius: 50%; transform: rotateZ(360deg); }
}

@-webkit-keyframes ani_icon5 {
    0% { border-radius: 50%; transform: rotateZ(0); }
    50% { border-radius: 0; transform: rotateZ(180deg); }
    100% { border-radius: 50%; transform: rotateZ(360deg); }
}

@keyframes visual_bg {
    0% { background-position: top left; }
    33% { background-position: bottom right; }
    66% { background-position: top right; }
    100% { background-position: bottom left; }
}

@keyframes arr_p {
    0% { transform: translateX(-100px) rotate(45deg); opacity: 0; }
    100% { transform: translateX(0) rotate(45deg); opacity: 1; }
}

@keyframes arr_n {
    0% { transform: translateX(100px) rotate(45deg); opacity: 0; }
    100% { transform: translateX(0) rotate(45deg); opacity: 1; }
}

@keyframes txtmotion {
    0% { opacity: 0; transform: translateY(-70px) }
    100% { opacity: 1; transform: translateX(0) }
}

/*spin*/
@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
    100% { -ms-transform: rotate(360deg); }
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}


@keyframes texttitle {
    0% { opacity: 0; transform: translateY(-50px); }
    100% { opacity: 1; transform: translateY(0); }
}

@-webkit-keyframes greetingBG {
    0% { -webkit-transform: scale(2); transform: scale(2); }
    100% { -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes greetingBG {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/*scroll fade*/
/*Animations*/

[data-animate-in] { opacity: 0; transition: transform 0.8s ease, opacity 0.8s ease }

[data-animate-in="up"] { transform: translate3d(0, 24px, 0) }

[data-animate-in="left"] { transform: translate3d(-25%, 0, 0) }

[data-animate-in="right"] { transform: translate3d(25%, 0, 0) }

[data-animate-in="down"] { transform: translate3d(0, -24px, 0) }

[data-animate-in="fadeIn"] { transform: translate3d(0, 0, 0) }

[data-animate-in].in-view { opacity: 1; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transition: transform 0.6s ease, opacity 0.6s ease }

.fade-in { opacity: 0; transition: opacity 1s ease }

.page-loaded .fade-in, .page-loaded.fade-in { opacity: 1 }

.isSafari.isTouch [data-animate-in], .isSafari.isTouch [data-animate-in="up"] { opacity: 1; transition: none; transform: none }